<template>
	<view class="technician-wages pt-lg" :style="{background:pageColor}" v-if="isLoad">
		<view class="radius-16 ml-lg mr-lg fill-base pd-lg">
			<view class="pt-md f-sm-title flex-center text-bold" :style="{color: primaryColor}">我的工价</view>
			<view class="pt-sm pb-lg f-paragraph flex-center" style="color: #7E859A;">为了精准派单, 系统给您当前的工时报价如下</view>
			<view class="radius-16" style="overflow: hidden;">
				<view class="flex-between" style="background: #E8F4FF;">
					<view class="flex-center flex-1 h-120 f-title text-bold c-title b-1px-r right-border">项目</view>
					<view class="flex-center flex-1 h-120 f-title text-bold c-title">价格</view>
				</view>
				<view class="wages-item flex b-1px-b bottom-border">
					<view class="flex-1 flex-center f-paragraph b-1px-r right-border">最低价</view>
					<view class="flex-1 flex-center f-paragraph" style="color: #AFB5C3;">
						<text class="f-sm-title text-bold font-num" style="color: #FF0041;">{{coachInfo.min_price}}</text>元/小时
					</view>
				</view>
				<view class="wages-item flex">
					<view class="flex-1 flex-center f-paragraph right-border b-1px-r">最高价</view>
					<view class="flex-1 flex-center f-paragraph" style="color: #AFB5C3;">
						<text class="f-sm-title text-bold font-num" style="color: #FF0041;">{{coachInfo.max_price}}</text>元/小时
					</view>
				</view>
			</view>
		</view>
		<view class="space-max-footer"></view>
		
		<fix-bottom-button @confirm="$util.goUrl({url: 1, openType: 'navigateBack'})" :text="[{text:'返回上一页',type:'confirm'}]" bgColor="#fff">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad() {
			this.initIndex()
		},
		methods: {
			...mapMutations([]),
			async initIndex(refresh = false) {
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.isLoad = true
				this.$util.hideAll()
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			}
		}
	}
</script>


<style lang="scss">
	.technician-wages {
		.h-120{
			height: 120rpx;
		}
		.wages-item{
			height: 126rpx;
			background: #F1F9FF;
		}
		.bottom-border::after{
			border-bottom-color: #DCECFA;
		}
		.right-border::after{
			border-right-color: #DCECFA;
		}
	}
</style>